Authenticated Routes এবং Protected Pages তৈরি করা

Next.js এ Authenticated Routes এবং Protected Pages তৈরি করা নিরাপত্তা নিশ্চিত করতে এবং ব্যবহারকারীকে নির্দিষ্ট রিসোর্স বা পেজে অ্যাক্সেস দেওয়ার জন্য একটি গুরুত্বপূর্ণ পদক্ষেপ। এটি সাধারণত authentication এবং authorization ব্যবস্থা অন্তর্ভুক্ত করে, যেখানে ব্যবহারকারীকে লগইন বা সাইন আপ করার পরই নির্দিষ্ট পেজগুলোতে প্রবেশ করতে দেওয়া হয়।

এখানে আমরা দেখবো কিভাবে Next.js এ Authenticated Routes এবং Protected Pages তৈরি করা যায়।

১. Authentication এবং Authorization এর ধারণা

• Authentication: এটি নিশ্চিত করে যে ব্যবহারকারী প্রকৃতপক্ষে কে এবং তারা সিস্টেমে লগইন করা আছে কি না।
• Authorization: এটি নিশ্চিত করে যে লগইন করা ব্যবহারকারীটি নির্দিষ্ট রিসোর্স বা পেজে প্রবেশের জন্য অনুমোদিত কিনা।

Next.js এ JWT (JSON Web Token) বা Session-Based Authentication ব্যবহৃত হতে পারে। এখানে আমরা JWT Authentication ব্যবহার করে Authenticated Routes এবং Protected Pages তৈরি করার পদ্ধতি দেখবো।

২. JWT Authentication এর মাধ্যমে Authenticated Routes তৈরি করা

JWT ভিত্তিক authentication ব্যবহারে, ব্যবহারকারী সফলভাবে লগইন করার পর একটি টোকেন পাওয়ার মাধ্যমে তাদের পরিচয় যাচাই করা হয়। এই টোকেনটি সাধারণত localStorage বা cookies তে সংরক্ষিত থাকে এবং এটি পরবর্তী রিকোয়েস্টে সার্ভারে পাঠানো হয়।

২.১. JWT ইনস্টলেশন এবং সেটআপ

প্রথমে, আপনাকে JWT টোকেন ব্যবহার করার জন্য প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

npm install jsonwebtoken cookie

এটি JWT টোকেন সাইন এবং ভেরিফাই করতে সাহায্য করবে এবং cookie প্যাকেজটি টোকেনকে ক্লায়েন্ট সাইডে সংরক্ষণ করবে।

২.২. লগইন পেজ তৈরি করা

লগইন পেজ তৈরি করা যাতে ব্যবহারকারী তাদের ক্রেডেনশিয়ালস প্রদান করে এবং টোকেন পান।

// pages/login.js
import { useState } from 'react';
import { useRouter } from 'next/router';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // ডেমো লগইন API কল (আপনার নিজের API ব্যবহার করুন)
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();

    if (data.token) {
      // টোকেন কুকিতে সংরক্ষণ করুন
      document.cookie = `token=${data.token}; path=/`;
      router.push('/dashboard');  // লগইন সফল হলে ড্যাশবোর্ডে পাঠানো হবে
    } else {
      alert('Invalid credentials');
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          placeholder="Email" 
          required 
        />
        <input 
          type="password" 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
          placeholder="Password" 
          required 
        />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

এখানে, লগইন সফল হলে ব্যবহারকারীকে টোকেন দেওয়া হচ্ছে এবং টোকেনটি কুকিতে সংরক্ষিত হচ্ছে। এরপর ব্যবহারকারীকে /dashboard রুটে রিডিরেক্ট করা হচ্ছে।

৩. Protected Routes তৈরি করা

Next.js এ আপনি getServerSideProps অথবা useEffect ব্যবহার করে protected pages তৈরি করতে পারেন। JWT Authentication ব্যবহারের জন্য সাধারণত getServerSideProps ব্যবহার করা হয়, যাতে আপনি সার্ভার সাইডেই টোকেন চেক করতে পারেন এবং ব্যবহারকারীর অ্যাক্সেস নিয়ন্ত্রণ করতে পারেন।

৩.১. প্রোটেক্টেড পেজ তৈরি করা

ধরা যাক আমাদের একটি dashboard পেজ আছে, যেখানে লগইন না করা ব্যবহারকারীরা প্রবেশ করতে পারবেন না।

// pages/dashboard.js
import { parse } from 'cookie';
import { useRouter } from 'next/router';

export async function getServerSideProps(context) {
  // কুকি থেকে টোকেন বের করা
  const cookies = parse(context.req.headers.cookie || '');
  const token = cookies.token || null;

  if (!token) {
    // টোকেন না থাকলে, ব্যবহারকারীকে লগইন পেজে পাঠানো
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  // টোকেন যাচাই করা (আপনার API এর মাধ্যমে)
  const res = await fetch('https://api.example.com/verify-token', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  const data = await res.json();

  if (!data.isValid) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }

  return {
    props: {},  // টোকেন যাচাই সফল হলে ড্যাশবোর্ড পেজ রেন্ডার হবে
  };
}

export default function Dashboard() {
  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
}

এখানে getServerSideProps ব্যবহার করা হয়েছে যা সার্ভার সাইডে টোকেন যাচাই করে। যদি টোকেন না থাকে অথবা টোকেন ইনভ্যালিড হয়, তবে ব্যবহারকারীকে লগইন পেজে রিডিরেক্ট করা হবে।

৪. Auth Context ব্যবহার করে Authenticated Routes

আপনি React Context API ব্যবহার করে ব্যবহারকারীর authentication স্টেট সেন্ট্রালাইজ করে, কম্পোনেন্টগুলোর মধ্যে শেয়ার করতে পারেন। এটি অ্যাপের সকল অংশে ব্যবহারকারীকে চেক করার একটি ভালো উপায় হতে পারে।

৪.১. Auth Context তৈরি করা

// context/AuthContext.js
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState(null);

  const login = (token) => {
    setAuth(token);
    document.cookie = `token=${token}; path=/`;
  };

  const logout = () => {
    setAuth(null);
    document.cookie = 'token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT';
  };

  return (
    <AuthContext.Provider value={{ auth, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

৪.২. Context এর মাধ্যমে প্রোটেক্টেড রুট পরিচালনা করা

// pages/dashboard.js
import { useAuth } from '../context/AuthContext';
import { useRouter } from 'next/router';

export default function Dashboard() {
  const { auth } = useAuth();
  const router = useRouter();

  if (!auth) {
    router.push('/login');
    return null;
  }

  return (
    <div>
      <h1>Welcome to the Dashboard</h1>
    </div>
  );
}

এখানে Auth Context ব্যবহৃত হচ্ছে যাতে অ্যাপের মধ্যে যেকোনো জায়গায় authentication স্টেট পাওয়া যায়।

সারাংশ

Next.js এ Authenticated Routes এবং Protected Pages তৈরি করতে, আপনি JWT, cookies, এবং getServerSideProps ব্যবহার করতে পারেন। এটি ব্যবহারকারীদের লগইন করার পর তাদের পেজের অ্যাক্সেস নিয়ন্ত্রণ করতে সহায়তা করে। Context API এর মাধ্যমে এই স্টেট গ্লোবালি পরিচালনা করাও একটি জনপ্রিয় পদ্ধতি।